<template>
  <el-card class="access" shadow="hover">
    <template #header>
      <vab-icon icon="line-chart-line" />
      后台信息统计
      <!-- <el-tag class="card-header-tag" type="success">日</el-tag> -->
    </template>
    <vab-chart :init-options="initOptions" :option="option" theme="vab-echarts-theme" />
    <!-- <div class="bottom">
      <span>
        日均访问量:
        <vab-count
          :decimals="countConfig.decimals"
          :duration="countConfig.duration"
          :end-val="countConfig.endVal"
          :prefix="countConfig.prefix"
          :separator="countConfig.separator"
          :start-val="countConfig.startVal"
          :suffix="countConfig.suffix"
        />
      </span>
    </div> -->
  </el-card>
</template>

<script>
import VabChart from "@/plugins/VabChart/index.vue";
// import VabCount from '@/extra/VabCount'
// import { postRequest } from '@/api/index.ts'
import _ from "lodash";
// import { getPieChartOption } from '@/views/sbxy/deviceBenefitAnalysis/hooks/chart.ts'

export default {
  components: {
    VabChart
    // VabCount,
  },
  setup() {
    const state = reactive({
      timer: null,
      countConfig: {
        startVal: 0,
        endVal: _.random(20000, 60000),
        decimals: 0,
        prefix: "",
        suffix: "",
        separator: ",",
        duration: 8000
      },
      initOptions: {
        renderer: "svg"
      },
      option: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          // orient: 'vertical',
          left: "left"
        },

        series: [
          {
            name: "后台信息统计",
            type: "pie",
            radius: ["15%", "65%"],
            center: ["55%", "60%"],
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 1
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    });

    // state.option = getPieChartOption(state.option)

    // const getDeviceData = async () => {
    //   const { datas } = await postRequest('device/deviceTypeStatis', {})
    //   state.option.series[0].data = datas?.map((item) => {
    //     const cItem = {
    //       name: item.pieName,
    //       value: item.rate,
    //     }
    //     return cItem
    //   })
    // }

    const getDeviceData = async () => {
      const datas = [
        { pieName: "广东分局", rate: 60 },
        { pieName: "广西分局", rate: 10 },
        { pieName: "湖南分局", rate: 8 },
        { pieName: "测试机构", rate: 2 }
      ];
      state.option.series[0].data = datas?.map(item => {
        const cItem = {
          name: item.pieName,
          value: item.rate
        };
        return cItem;
      });
    };

    getDeviceData();

    onBeforeMount(() => {
      const base = +new Date(2020, 1, 1);
      const oneDay = 24 * 3600 * 1000;
      const date = [];

      const data = [Math.random() * 1500];
      let now = new Date(base);

      const addData = shift => {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/");
        date.push(now);
        data.push(_.random(20000, 60000));

        if (shift) {
          date.shift();
          data.shift();
        }
        now = new Date(+new Date(now) + oneDay);
      };

      for (let i = 1; i < 6; i++) {
        addData();
      }
      addData(true);
      // state.option.xAxis[0].data = date
      // state.option.series[0].data = data
      // state.timer = setInterval(() => {
      //   addData(true)
      //   state.option.xAxis[0].data = date
      //   state.option.series[0].data = data
      // }, 6000)
    });

    onBeforeUnmount(() => {
      state.timer = null;
      clearInterval(state.timer);
    });

    return {
      ...toRefs(state)
    };
  }
};
</script>
